<%@page import="org.proddevplm.dao.data.productFollowUp.usePhase.Complaints"%>
<%@page import="java.util.List"%>

<script>
	
	$(function(){
		$("#complaints")
			.tablesorter({
				headers:{
					0:{sorter: false}
				},
				widgets: ['zebra']
			})
			.tablesorterPager({
				container: $("#complaintsPager")
				})
			.tablesorterFilter({
				filterContainer: "#complaintsFilter-box",
	        	filterClearContainer: "#complaintsFilter-clear-button",
	            filterCaseSensitive:false,
	            filterColumns: [1,2,3,4,5,6,7]
			})
	})
	
	function downloadFile(fileName){
		window.open("/proddev/CommonsFileUploadServlet?fileName="+fileName);
	}
	
	$('.downloadable').mouseover(function () {
		$(this).css("color","blue");
		$(this).css("cursor", "pointer");
	});
	
	$('.downloadable').mouseout(function () {
		$(this).css("color","black");
	});

</script>

<%
	List<Complaints> complaintsByProdId = (List)session.getAttribute("complaintsByProdId");
%>

<div align="center">

	<div style="width:auto">
		
		<div class="pageTitle" style="margin-bottom:10px">
			<b>Complaints from users</b>
		</div>
		
		<div style="float:right; margin-bottom:-10px; text-align:right; ">
			Search table: <input name="filter" id="complaintsFilter-box" value="" maxlength="30" size="30" type="text" style="background-color:#E6EEEE">
			<input id="complaintsFilter-clear-button" type="submit" value="Clear" style="background-color:#E6EEEE;"/>
		</div>
		<div style="clear:both;"></div>
		<table id="complaints" class="tablesorter" style="width:100%" rules="rows" frame="hsides" bordercolor="#DBDBDB" >
			<thead>
				<tr>
					<th style="width:3%; text-align:center">No.</th>
					<th style="width:10%">Unique id</th>
					<th style="width:28%">Problem description</th>
					<th style="width:10%">Problem type</th>
					<th style="width:15%">Attachment</th>
					<th style="width:12%">Author</th>
					<th style="width:12%">Contact</th>
					<th >Date</th>
				</tr>
			</thead>
			<tbody>
				<%for(int i=0; i<complaintsByProdId.size(); i++){
					Complaints c = (Complaints)complaintsByProdId.get(i);%>
					<tr>
						<td style="text-align:center"><%=i+1 %></td>
						<td><%=c.getUniqueId() %></td>
						<td><%=c.getDescription() %></td>
						<td><%=c.getType() %></td>
						<td>
							<%String filePath = c.getFilePath();
							String fileName = filePath.substring(filePath.lastIndexOf("\\") + 1);%>
							<div class="downloadable" onclick="downloadFile('<%=fileName%>')"><%=fileName %></div>
						</td>
						<td><%=c.getAuthor() %></td>
						<td><%=c.getEmail() %></td>
						<td><%=c.getDate() %>
					</tr>
				<%}%>
			</tbody>
		</table>
		<div id="complaintsPager" class="pager" style="float:right; margin-top:-10px">
			<form>
				<img src="/proddev/images/tablePager/first.png" class="first" width="20" height="20" />
				<img src="/proddev/images/tablePager/previous.png" class="prev" width="20" height="20" />
				<input type="text" class="pagedisplay" style="text-align:center; width:40px; height:20px; background-color:#E6EEEE"/>
				<img src="/proddev/images/tablePager/next.png" class="next" width="20" height="20" />
				<img src="/proddev/images/tablePager/last.png" class="last" width="20" height="20" />
				<select class="pagesize" style="height:20px;">
					<option SELECTED value="1">set paging</option>
					<option value="5">5 per page</option>
					<option value="10">10 per page</option>
					<option value="20">20 per page</option>
					<option value="30">30 per page</option>					
				</select>
			</form>
		</div>	
	</div>
</div>